<template>
    <div class="mianbao">
       <el-breadcrumb separator="/gonggong/home" class="mianbao">
             <el-breadcrumb-item v-for="item,index in arrroute" :key="index">{{item.name}}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script>
export default {
    data(){
        return{
            arrroute:[]
        }
    },
    watch:{
        $route:{
            handler:'changepath'
        }
    },
    methods:{
        changepath(route){
            console.log(route);
                let arrroute = []
            route.matched.forEach((item,index) => {
                if(index>0){
                    arrroute.push({
                        name:item.meta.title,
                        path:item.path
                    })
                }
                console.log(arrroute);
                this.arrroute = arrroute
            });

        }
    }

}
</script>

<style>
.el-breadcrumb__inner{

    height: 20px;
    font-size: 18px;
    color:#fff;
    font-weight: 700;
}
.mianbao{
    height: 20px;
    
    background-color:#b1d4f7 ;
    line-height: 20px;
}
</style>